<template>
    <div class="ele-body">
      <!-- 搜索表单 -->
      <recaccountauitSearch @search="reload"  />
      <!-- 数据表格 -->
      <el-card shadow="never">
        <ele-pro-table
          ref="table"  row-key="id" :columns="columns" :datasource="datasource"  :need-page="true"    @done="onDone"  :height="tableHeight" :full-height="tableFullHeight"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
            v-permission="'Financial_Recaccountaui_Export'"
              size="small"
              icon="el-icon-upload2"
              class="ele-btn-icon"
              @click="reportexcel"
            >
              导出
            </el-button>
          </template>
           <!-- 标题列 -->
           <template slot="surplusAmountCn" slot-scope="{ row }">
            ￥{{ row.surplusAmountCn }}
          </template>
           <!-- 标题列 -->
           <template slot="auitAmountCn" slot-scope="{ row }">
            ￥{{ row.auitAmountCn }}
          </template>
          <template slot="recAmountCn" slot-scope="{ row }">
            ￥{{ row.recAmountCn }}
          </template>
          <template slot="disAmountCn" slot-scope="{ row }">
            ￥{{ row.disAmountCn }}
          </template>
          <template slot="orderAmountCn" slot-scope="{ row }">
            ￥{{ row.orderAmountCn }}
          </template>
           <!-- 操作列 -->
          <template slot="orderNo" slot-scope="{ row }"  >
            <el-link  type="primary"   @click="clickbillNo(row)" >{{ row.orderNo }}</el-link>
          </template>
          <!-- 操作列   -->
          <template slot="action" slot-scope="{ row }"  >
            <el-link type="primary" :underline="false" v-show="row.surplusAmount>0" icon="el-icon-edit" @click="openEdit(row)" v-permission="'Financial_Recaccountaui_SK'">收款</el-link>
            <el-link type="info"  :underline="false"  icon="el-icon-menu" @click="openItemEdit(row)" >明细</el-link>
            <el-popconfirm v-show=" row.deleted!=1 && (row.auitAmount>0 || row.payActAmount>0)"  class="ele-action" title="确定要反单吗？"  @confirm="remove(row)" >
              <el-link type="danger" slot="reference" :underline="false"  icon="el-icon-delete" v-permission="'Financial_Recaccountaui_FD'">反单</el-link>
            </el-popconfirm>
            
          </template>
        </ele-pro-table>
      </el-card>
       <!-- 编辑弹窗 -->
       <recreceiptEdit :data="current" :visible.sync="showEdit" @done="reload" />

        <!-- 编辑弹窗 -->
        <recreceiptitemlist :data="current" :visible.sync="showItemEdit" />
      <!-- 导出数据 -->
      <ExportDialog ref="ExportDialog"></ExportDialog>
    </div>
  </template>
  
  <script>
    import { removePageTab } from '@/utils/page-tab-util';
    import ExportDialog from '@/components/Excel/ExportDialog'
    import recreceiptEdit from './components/recreceipt-edit.vue';
    import recaccountauitSearch from './components/recaccountauit-search.vue';
    import recreceiptitemlist from './components/recreceiptitemlist.vue';
    import { QueryRecaccountauitByCondition,AnitRecaccountauit } from '@/api/finance/recaccountauit';



    export default {
      name: 'Recaccountauit',
      components: {recreceiptEdit,recaccountauitSearch,recreceiptitemlist,ExportDialog},
      data() {
        return {
          // 表格列配置
          columns: [
            {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
            {prop: 'orderNo', label: '单据编号', width: 120,showOverflowTooltip: true,slot:'orderNo', align: 'center',},
            {prop: 'auitOrderTypeDesc', label: '单据类型',width: 150, showOverflowTooltip: true, align: 'center', },
            {prop: 'customerName', label: '客户名称',width: 150, showOverflowTooltip: true, align: 'center', },
            // {prop: 'orderAmount', label: '合计金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'orderAmount'},
            // {prop: 'disAmount', label: '优惠金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'disAmount'},
            {prop: 'recAmount', label: '应收金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'recAmount'},
            {prop: 'preAmount', label: '预收金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'preAmount'},
            {prop: 'auitAmount', label: '已收金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'auitAmount'},
            {prop: 'payActAmount', label: '退款金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'payActAmount'},
            {prop: 'surplusAmount', label: '未收金额',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'surplusAmount'},
            {prop: 'currencyDesc', label: '币种',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'currencyId'},
            {prop: 'rate', label: '汇率',width: 100, showOverflowTooltip: true, align: 'center', sortable: 'rate'},
            // {prop: 'orderAmountCn', label: '合计金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'orderAmountCn'},
            // {prop: 'disAmountCn', label: '优惠金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'disAmountCn'},
            {prop: 'recAmountCn', label: '应收金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'recAmountCn'},
            {prop: 'preAmountCn', label: '预收金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'preAmountCn'},
            {prop: 'auitAmountCn', label: '已收金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'auitAmountCn'},
            {prop: 'payActAmountCn', label: '退款金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'payActAmountCn'},
            {prop: 'surplusAmountCn', label: '未收金额(￥)',width: 150, showOverflowTooltip: true, align: 'center', sortable: 'surplusAmountCn'},
            {
              prop: 'orderDate', label: '订单日期', width: 120,showOverflowTooltip: true, align: 'center',sortable: 'orderDate',
              formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
            },
            {columnKey: 'action', label: '操作',width: 200,align: 'center',slot:'action', resizable: false, hideInSetting: true, showOverflowTooltip: true,fixed: 'right', }
          ],
          //是否详情
          btnIndex: '1',
          fixedHeight:true,
          // 当前编辑数据
          current: null,
          // 是否显示编辑弹窗
          showEdit: false,
          // 是否显示编辑弹窗
          showItemEdit: false,
          // 导出列
          exportList: [
            { name: "单据编号", keys: "orderNo", status: true },
            { name: "单据类型", keys: "auitOrderTypeDesc", status: true },
            { name: "客户名称", keys: "customerName", status: true },
            { name: "应收金额", keys: "recAmount", status: true },
            { name: "预收金额", keys: "preAmount", status: true },
            { name: "已收金额", keys: "auitAmount", status: true },
            { name: "退款金额", keys: "payActAmount", status: true },
            { name: "未收金额", keys: "surplusAmount", status: true },
            { name: "币种", keys: "currencyDesc", status: true },
            { name: "汇率", keys: "rate", status: true },
            { name: "应收金额(￥)", keys: "recAmountCn", status: true },
            { name: "预收金额(￥)", keys: "preAmountCn", status: true },
            { name: "已收金额(￥)", keys: "auitAmountCn", status: true },
            { name: "退款金额(￥)", keys: "payActAmountCn", status: true },
            { name: "未收金额(￥)", keys: "surplusAmountCn", status: true },
            { name: "订单日期", keys: "orderDate", status: true },
          ]
        };
      },
      computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

          return fh;
        },
      },
      methods: {
        /* 表格数据源 */
        async datasource(params) {
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }
        
          if(!params.where.conditions)params.where.conditions= [];
          
          /* 剩余金额大于零 */
          // params.where.conditions.push({key:"surplusAmount",operator: 2,value:  0});

          let data = await QueryRecaccountauitByCondition(params.where);

          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
          
          return {
              list:data.items,
              count:data.totalrecords,
          };
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
          this.supplierList = data;
        },
        /* 刷新表格 */
        reload(where) {
          
          this.$refs.table.reload({ where: where });
        },
        
        /**
         * 显示编辑
         * @param row 当前行对像
        */
        openEdit(row) {
          this.current = row;
          this.showEdit = true;
        },

        openItemEdit(row) {
          this.current = row;
          this.showItemEdit = true;
        },
        /* 删除 */
        remove(row) {
          const loading = this.$loading({ lock: true });
          AnitRecaccountauit(row.id)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        },
        /* 导出 */
        reportexcel(pams) {

          //初始化参数
          let params = {
            pagesize: 0,
            pageindex: 1,
            conditions: [],
            orderBys: [{ sort: "createDate", order: 1, }],
          };
          //加载进度条
          const loading = this.$loading({ lock: true });
          //重新请求查询
          this.$refs.table.doRequest(({ where }) => {
          if(where){
            params.orderBys = where.orderBys;
            params.pageindex = where.pageindex;
            params.conditions = where.conditions;
          }
          //查询数据
          QueryRecaccountauitByCondition(params)
            .then((data) => {
              loading.close();
              this.$refs.ExportDialog.showEdits = true
              this.$refs.ExportDialog.checkList = this.exportList
              this.$refs.ExportDialog.titleName = "应收账款列表"
              this.$refs.ExportDialog.dataList = data.items;
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
          });
        },

        //单击单号
      clickbillNo(row){

        // 销售出库单
        if(row.auitOrderType == 1){
          removePageTab({ key: '/businesshandling/saleoutmanger' });
          this.$nextTick(() => {
            this.$router.push({path: '/businesshandling/saleoutmanger', query: { "orderId": row.orderId } });
          });
        }

        // 销售单
        if(row.auitOrderType == 3){
          removePageTab({ key: '/businesshandling/saleordermanager' });
          this.$nextTick(() => {
            this.$router.push({path: '/businesshandling/saleordermanager', query: { "orderId": row.orderId } });
          });
        }
      },

      /* 样式 */
      cellStyle(param){
        const { row, column, rowIndex, columnIndex } = param;
        if(columnIndex==4||columnIndex==5||columnIndex==6||columnIndex==9||columnIndex==10||columnIndex==11){
          return{
            color:''
          }
        }
      },
      }
    };
  </script>
   <style lang="scss" scoped>
    /*总计字体颜色
    ::v-deep .el-table__footer-wrapper tbody td {
      color: var(--color-primary);
      cursor: pointer;
    }*/
  </style>